<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../js/boot.js" type="text/javascript" charset="utf-8"></script>
    <title>map</title>
  </head>
  <body>
    <div class="map" style="width: 100%; height: 100%">
      <div id="mapChart" style="width: 100%; height: 80vh"></div>
    </div>
    <script>
      var chartDom = document.getElementById("mapChart");
      var myChart = echarts.init(chartDom);
      var option;

      var data1 = [
                {
                  name: "杭州市",
                  value: [119.553576, 29.887459, 12.43],
                },
                {
                  name: "宁波市",
                  value: [121.649792, 29.468388, 8.78],
                },
                {
                  name: "温州市",
                  value: [119.537199, 28.987644, 1.07],
                },
                {
                  name: "嘉兴市",
                  value: [120.750865, 30.762653, 4.68],
                },
                {
                  name: "湖州市",
                  value: [119.889066, 30.763861, 2.43],
                },
                {
                  name: "绍兴市",
                  value: [120.882112, 29.597117, 3.82],
                },
                {
                  name: "金华市",
                  value: [119.649506, 29.089524, 3.85],
                },
                {
                  name: "衢州市",
                  value: [118.87263, 28.941708, 1.29],
                },
                {
                  name: "舟山市",
                  value: [122.106863, 30.016028, 0.77],
                },
                {
                  name: "台州市",
                  value: [121.428599, 28.661378, 1.85],
                },
                {
                  name: "丽水市",
                  value: [119.517145, 28.197644, 1.07],
                },
              ]

      $.get("../json/echartsMap/330000.json", (map) => {
        echarts.registerMap("map", map);

        var option = {
          geo: {
            map: "map",
            aspectScale: 0.75,
            // nameProperty: 'adcode',
            roam: false, //是否允许缩放
            zoom: 1.1, //默认显示级别
            label: {
              show: false,
            },
            itemStyle: {
            normal: {
              areaColor: "#092D50",
              shadowColor:'#185678',
              shadowOffsetX: 0,
              shadowOffsetY: 11
            },
            emphasis: {
              areaColor: '#2AB8FF',
              borderWidth: 0,
              color: 'green',
              label: {
                show: false
              }
            }
          },


            tooltip: {
              show: false,
            },
            // selectedMode:"single",
            shadowColor:'rgb(58,115,192)',
              // shadowOffsetX: 10,
              shadowOffsetY: 11
          },
          series: [
            {
              //地图
              // name: "map",
              geoIndex: 1,
              z: 0,
              type: "map",
              map: "map",
              zoom: 1.1, //默认显示级别
              showLegendSymbol: false,

              label: {
                show: false,
                // show: true,
                color: "#333333",
                textStyle: {
                  rich: {
                    value: {
                      fontSize: 16,
                      color: "#FFB136",
                      fontWeight: "bold",
                    },
                    name: {
                      fontSize: 16,
                    },
                  },
                },
                formatter: (params) => {
                  console.log(params);
                  return "{name|" + (params.name || "") + "}" + "\n" + "{value|" + (params.value || "") + "}";
                },
              },
              itemStyle: {
                normal: {
                  borderColor: "#CCE0E9",
                  borderWidth: 1,
                  areaColor: "#082847",
                },
                emphasis: {
                  areaColor: "#A1CFFF",
                  borderWidth: 0,
                  label: {
                    show: false,
                  },
                },
              },
              // geo存在时 此属性在5.1.2中生效，无geo在4.8.0后生效
              // nameProperty: 'adcode',
              select: {
                label: { show: false },
                itemStyle: {
                  areaColor: "#A1CFFF",
                  borderWidth: 0,
                },
              },
              // nameProperty: 'adcode',
              data: data1,
            },
            {
              //点
              show: false,
              name: "办件量",
              data: data1,
              type: "scatter",
              coordinateSystem: "geo",
              showEffectOn: "render",
              animationDuration: 0,
              showAllSymbol: true,
              symbol: "pin",
              hoverAnimation: true,
              symbolSize: 75,
              label: {
                show: true, //点数字
                position: "inside",
                // distance: 5,
                color: "#fff",
                fontSize: 16,
                formatter: (params) => {
                  return params.value[2] - 0;
                },
              },
              itemStyle: {
                color: "#00cc33",
              },
              z: 1,
            },
            {
              //点
              name: "办件量",
              data: data1,
              type: "scatter",
              coordinateSystem: "geo",
              showEffectOn: "render",
              animationDuration: 0,
              showAllSymbol: false,
              symbol: "circle",
              hoverAnimation: false,
              symbolSize: 1,
              label: {
                show: true, //点下文字
                position: "bottom",
                // distance: 5,
                color: "#fff",
                fontSize: 16,
                formatter: (params) => {
                  return params.name;
                },
              },
              itemStyle: {
                color: "#fff",
              },
              z: 1,
            },
          ],
        };
        myChart.setOption(option, true);
      });
    </script>
  </body>
</html>
